<template>
  <div class="content_container user_vue">
    <div class="toolbar">
      <el-form inline @submit.native.prevent>
        <el-form-item>
          <el-input :placeholder="'请输入关键字 ( ' + tableParam.dropdown[tableParam.keycurrent].value + ' )'" v-model="tableParam._keyword" size="mini"></el-input>
        </el-form-item>
        <el-form-item>
          <el-dropdown split-button="" type="primary" @command="updateKeyCurrent" @click="tableParam.keyword = tableParam._keyword; tableParam.pageno = 1; query();" size="mini">
            <i class="el-icon-search" style="margin-right:5px;"></i>查询
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in tableParam.dropdown" :command="item.key" :key="item.key + '_dropdown'">{{item.value}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-button type="primary" icon="el-icon-plus" @click="recordFormInit(); recordForm.visible = true; recordForm.flag = true;" size="mini">新增</el-button>
        </el-form-item>
      </el-form>
    </div>
    <sample-table :data="records" :isloading="tableParam.loading" sortcustom @afterSortChange="sortChange" @selectionChange="selectionChange">
      <sample-table-header slot="header">
        <sample-table-header-selection />
        <sample-table-header-column label="姓名" prop="ZK_NAME" sortable />
        <sample-table-header-column label="单位" prop="ZK_DEPARTMENT" sortable />
        <sample-table-header-column label="电子邮箱" prop="ZK_EMAIL" sortable />
        <sample-table-header-column label="电话号码" prop="ZK_PHONE" sortable />
        <sample-table-header-column label="角色" prop="ZK_ROLE" sortable />
        <sample-table-header-column label="最后修改" prop='EB_LASTMODIFY_DATETIME' sortable />
        <sample-table-header-column label="操作" />
      </sample-table-header>
      <sample-table-body slot-scope="scope" :row="scope.row" :index="scope.index" slot="body">
        <sample-table-body-selection />
        <sample-table-body-column prop="ZK_NAME" />
        <sample-table-body-column prop="ZK_DEPARTMENT" />
        <sample-table-body-column prop="ZK_EMAIL" />
        <sample-table-body-column prop="ZK_PHONE" />
        <sample-table-body-column prop="ZK_ROLE" />
        <sample-table-body-column>
          {{$common.ChangeDateFormat_hhmmss(scope.row.EB_LASTMODIFY_DATETIME, '-')}}
        </sample-table-body-column>
        <sample-table-body-column>
          <i class="el-icon-edit icon-btn-edit" @click="recordFormInit(); getUserInfo(scope)"></i>
          <i class="el-icon-delete icon-btn-del" @click="delUserInfo(scope)"></i>
        </sample-table-body-column>
      </sample-table-body>
    </sample-table>
    <el-col :span="24" class="botton_toolbar">
      <el-button type="danger" :disabled="selection.length === 0" icon="el-icon-delete" @click="batchDelete" size="mini">
        批量删除
        <span v-if="selection.length !== 0"> (共{{selection.length}}条)</span>
      </el-button>
      <el-pagination layout="prev, pager, next, jumper, total" :page-size="tableParam.pagesize" :current-page="tableParam.pageno" :total="tableParam.total" @current-change="currentChange" style="float:right;">
      </el-pagination>
    </el-col>
    <el-dialog :title="recordForm.flag ? '新增' : '编辑'" :visible.sync="recordForm.visible">
      <el-form ref="recordForm" class="recordForm" label-width="80px" :model="recordForm.userinfo" :rules="userformRules" @submit.native.prevent>
        <el-form-item label="账　号" prop="ZK_ID" v-if="recordForm.flag">
          <el-input v-model="recordForm.userinfo.ZK_ID"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="ZK_NAME">
          <el-input v-model="recordForm.userinfo.ZK_NAME"></el-input>
        </el-form-item>
        <el-form-item label="密　码">
          <el-input type="password" v-model="recordForm.userinfo.ZK_PASSWORD" autocomplete='new-password' :placeholder="recordForm.flag ? '新增用户时必须填写密码' : '密码为空时默认不修改'"></el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="性　别">
              <el-radio-group v-model="recordForm.userinfo.ZK_SEX">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="角　色">
              <el-select v-model="recordForm.userinfo.ZK_ROLE" style="width:100%;">
                <el-option v-for="item in roles" :label="item.key" :key="item.key" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="单　位" prop="ZK_DEPARTMENT">
          <el-input v-model="recordForm.userinfo.ZK_DEPARTMENT" placeholder="请输入所属单位"></el-input>
        </el-form-item>
        <el-form-item label="电子邮箱" prop="ZK_EMAIL">
          <el-input v-model="recordForm.userinfo.ZK_EMAIL" placeholder="请输入电子邮箱 以方便联系"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="ZK_PHONE">
          <el-input v-model="recordForm.userinfo.ZK_PHONE" placeholder="请输入电话号码 以方便联系"></el-input>
        </el-form-item>
        <el-form-item label="备　注">
          <el-input type="textarea" v-model="recordForm.userinfo.ZK_REMARK"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="recordForm.visible = false;">取 消</el-button>
        <el-button type="primary" @click="recordForm.flag ? insertUserInfo() : updateUserInfo()">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import md5 from 'js-md5';

export default {
  data() {
    const validateEmail = (rule, value, callback) => {
      setTimeout(() => {
        if (!this.$common.ValidateEmail(value)) {
          callback(new Error('请输入有效的电子邮箱'));
        } else {
          callback();
        }
      }, 100);
    };
    const validatePhone = (rule, value, callback) => {
      setTimeout(() => {
        if (!this.$common.ValidatePhone(value)) {
          callback(new Error('请输入有效的电话号码'));
        } else {
          callback();
        }
      }, 100);
    };
    return {
      selection: [],
      records: [],
      roles: [],
      tableParam: {
        keyword: '',
        _keyword: '',
        prop: '',
        order: '',
        pagesize: 15,
        pageno: 1,
        total: 0,
        loading: false,
        dropdown: [
          { key: 'ZK_NAME', value: '姓名' },
          { key: 'ZK_DEPARTMENT', value: '单位' },
          { key: 'ZK_EMAIL', value: '电子邮箱' },
          { key: 'ZK_PHONE', value: '电话号码' },
        ],
        keycurrent: 0,
      },
      recordForm: {
        flag: true,
        userinfo: {
          ZK_ID: '',
          ZK_PASSWORD: '',
          ZK_NAME: '',
          ZK_DEPARTMENT: '',
          ZK_EMAIL: '',
          ZK_PHONE: '',
          ZK_SEX: '男',
          ZK_HEAD_PORTRAIT: '',
          ZK_ROLE: '',
          ZK_REMARK: '',
        },
        visible: false,
        index: -1,
      },
      userformRules: {
        ZK_ID: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到 32 个字符',
            trigger: 'blur',
          },
        ],
        ZK_NAME: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            min: 3,
            max: 32,
            message: '长度在 3 到 32 个字符',
            trigger: 'blur',
          },
        ],
        ZK_DEPARTMENT: [
          { required: true, message: '请输入所属单位', trigger: 'blur' },
        ],
        ZK_EMAIL: [{ validator: validateEmail, trigger: 'blur' }],
        ZK_PHONE: [{ validator: validatePhone, trigger: 'blur' }],
      },
      uploadAction: '#',
    };
  },
  created() {
    this._recordForm = JSON.stringify(this.recordForm);
    this.query();
    this.bindRole();
  },
  methods: {
    query() {
      this.tableParam.loading = true;
      this.$http
        .get(
          '/api/user/list',
          {
            params: {
              KEYWORD: this.tableParam.keyword,
              TYPE: this.tableParam.dropdown[this.tableParam.keycurrent].key,
              PROP: this.tableParam.prop,
              ORDER: this.tableParam.order,
              PAGESIZE: this.tableParam.pagesize,
              PAGENO: this.tableParam.pageno,
            },
          },
          { emulateJSON: true },
        )
        .then(res => {
          this.tableParam.loading = false;
          if (res.data.flag === 'True') {
            this.tableParam.total = Number.parseInt(res.data.message, 10);
            this.records = res.data.result;
          }
        });
    },
    updateKeyCurrent(command) {
      this.tableParam.dropdown.forEach((item, index) => {
        if (item.key === command) {
          this.tableParam.keycurrent = index;
        }
      });
    },
    selectionChange(sels) {
      const list = [];
      sels.forEach(item => {
        list.push(this.records[item]);
      });
      this.selection = list;
    },
    recordFormInit() {
      if (this.$refs.recordForm) {
        this.$refs.recordForm.resetFields();
      }
      this.recordForm = JSON.parse(this._recordForm);
    },
    currentChange(currentPage) {
      if (this.tableParam.pageno !== currentPage) {
        this.tableParam.pageno = currentPage;
        this.query();
      }
    },
    sortChange(s) {
      if (s.sortOrder) {
        this.tableParam.prop = s.sortProp;
        this.tableParam.order = s.sortOrder.includes('desc')
          ? 'descending'
          : 'ascending';
        this.tableParam.pageno = 1;
        this.query();
      }
    },
    bindRole() {
      this.$http.get('/api/home/rolelist').then(res => {
        if (res.data.flag === 'True') {
          this.roles = [];
          res.data.result.forEach(item => {
            this.roles.push({ value: item.ZK_ID, key: item.ZK_ROLE });
          });
        }
      });
    },
    getUserInfo(scope) {
      this.$http
        .get('/api/user/detail', { params: { UID: scope.row.ZK_ID } })
        .then(res => {
          if (res.data.flag === 'True') {
            /* eslint-disable no-param-reassign */
            res.data.result.ZK_PASSWORD = '';
            this.recordForm.userinfo = res.data.result;
            this.recordForm.flag = false;
            this.recordForm.visible = true;
            this.recordForm.index = scope.index;
          }
        });
    },
    delUserInfo(scope) {
      this.$confirm('确认删除该记录吗?', '提示', { type: 'warning' })
        .then(() => {
          this.$http
            .post('/api/user/delete', { IDS: scope.row.ZK_ID })
            .then(res => {
              if (res.data.flag === 'True') {
                this.records.splice(scope.index, 1);
                this.$notify({
                  title: '成功',
                  message: `已成功删除用户${scope.row.ZK_NAME}`,
                  type: 'success',
                });
              }
            });
        })
        .catch(() => {});
    },
    batchDelete() {
      const ids = [];
      if (this.selection.length === 0) {
        this.$message.error('请先选中需要删除的选项');
        return;
      }
      this.selection.forEach(item => {
        ids.push(item.ZK_ID);
      });
      this.$confirm('确认删除所选的记录吗?', '提示', { type: 'warning' })
        .then(() => {
          this.$http
            .post('/api/user/delete', { IDS: ids.join(',') })
            .then(res => {
              if (res.data.flag === 'True') {
                this.$notify({
                  title: '成功',
                  message: '成功删除多条记录(一秒后将自动刷新页面)',
                  type: 'success',
                });
                setTimeout(() => {
                  window.location.reload();
                }, 500);
              }
            });
        })
        .catch(() => {});
    },
    insertUserInfo() {
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          this.recordForm.userinfo.ZK_PASSWORD_MD5 = md5(
            this.recordForm.userinfo.ZK_PASSWORD,
          );
          this.$http
            .post('/api/user/insert', this.recordForm.userinfo)
            .then(res => {
              if (res.data.flag === 'True') {
                this.records.unshift(
                  JSON.parse(JSON.stringify(this.recordForm.userinfo)),
                );
                this.$notify({
                  title: '成功',
                  message: `新增用户:${
                    this.recordForm.userinfo.ZK_NAME
                  }(一秒后将自动刷新页面)`,
                  type: 'success',
                });
                this.recordFormInit();
                setTimeout(() => {
                  window.location.reload();
                }, 500);
              } else {
                this.$message.warning(res.data.message);
              }
            });
        } else {
          this.$message.warning('请验证数据有效性');
        }
      });
    },
    updateUserInfo() {
      this.$refs.recordForm.validate(valid => {
        if (valid) {
          if (this.recordForm.userinfo.ZK_PASSWORD) {
            this.recordForm.userinfo.ZK_PASSWORD_MD5 = md5(
              this.recordForm.userinfo.ZK_PASSWORD,
            );
          }
          this.$http
            .post('/api/user/update', this.recordForm.userinfo, {
              emulateJSON: true,
            })
            .then(res => {
              if (res.data.flag === 'True') {
                const form = JSON.parse(
                  JSON.stringify(this.recordForm.userinfo),
                );
                this.roles.forEach(item => {
                  if (item.value === this.recordForm.userinfo.ZK_ROLE) {
                    form.ZK_ROLE = item.key;
                  }
                });
                this.records[this.recordForm.index].ZK_NAME = form.ZK_NAME;
                /* eslint-disable operator-linebreak  */
                this.records[this.recordForm.index].ZK_DEPARTMENT =
                  form.ZK_DEPARTMENT;
                this.records[this.recordForm.index].ZK_EMAIL = form.ZK_EMAIL;
                this.records[this.recordForm.index].ZK_PHONE = form.ZK_PHONE;
                this.records[this.recordForm.index].ZK_ROLE = form.ZK_ROLE;
                this.$notify({
                  title: '成功',
                  message: `更新用户信息：${this.recordForm.userinfo.ZK_NAME}`,
                  type: 'success',
                });
                this.recordFormInit();
              }
            });
        } else {
          this.$message.warning('请验证数据有效性');
        }
      });
    },
  },
};
</script>

<style>
.user_vue .toolbar {
  width: 100%;
}
.user_vue .del:hover {
  color: #fff;
  background-color: #ff4949;
  border-color: #ff4949;
}
.user_vue .botton_toolbar {
  border: 1px solid #f2f2f2;
  box-shadow: 0 0 5px #f2f2f2;
  padding: 10px;
  margin: 10px 0 20px 0;
}
.user_vue .botton_toolbar:hover {
  background: #f2f2f2;
  box-shadow: none;
}
.user_vue .avatar-uploader {
  text-align: center;
}
.user_vue .avatar-uploader .user_img {
  max-width: 100px;
  max-width: 100px;
}
.user_vue .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
}
.user_vue .avatar-uploader-icon:hover {
  border-color: #20a0ff;
}
.user_vue .avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>
